Adaptive Thumbnail Pile Effectの使い方
- 下記ページの 「Download source」 よりファイル1式をダウンロード。
- ダウンロードしたファイルを任意の場所にコピー。
- 動作させるファイル(サンプルではindex.html)にコードを記述。
<パスは上記ファイル構成の場合なので環境にあわせて変更>
・head部分にcss,jsファイルを読み込ませるためのコードを記述。<head> <!--ダウンロードしたファイル--> <link rel="stylesheet" type="text/css" href="css/stapel.css"> <script src="js/modernizr.custom.63321.js"></script> </head>
サンプルのcssコード(サンプルのcssは改変しています)
/*ページ設定部分(style.cssなどで設定していれば削除する)*/ body { margin: 0; padding: 0; background: #fff; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; } /*ここまでページ設定部分*/ /*ここからAdaptive Thumbnail Pile Effectの設定*/ .topbar { position: relative; padding: 20px 0; margin: 50px 0; } .back { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; border-radius: 50%; text-align: center; line-height: 38px; color: #999; background: #bbb; background: rgba(187,187,187,0.2); cursor: pointer; display: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .no-touch .back:hover { background: #bbb; background: rgba(187,187,187,0.5); } .tp-grid { list-style-type: none; position: relative; display: block; } .tp-grid li { position: absolute; cursor: pointer; border: 10px solid #fff; box-shadow: 0 2px 3px rgba(0,0,0,0.2); display: none; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .no-js .tp-grid li { position: relative; display: inline-block; } .tp-grid li a { display: block; outline: none; border: none; } .tp-grid li img { display: block; border: none; } .tp-info, .tp-title { position: absolute; background: #fff; line-height: 20px; color: #333; top: 40%; width: 75%; padding: 10px; font-weight: 700; text-align: right; left: -100%; box-shadow: 1px 1px 1px rgba(0,0,0,0.1), 5px 0 5px -3px rgba(0,0,0,0.4), inset 0 0 5px rgba(0,0,0,0.04); } .touch .tp-info { left: 0px; } .no-touch .tp-info { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .no-touch .tp-grid li:hover .tp-info { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -o-transition-delay: 150ms; -ms-transition-delay: 150ms; transition-delay: 150ms; } .no-touch .tp-open li:hover .tp-info { left: 0px; } .tp-title { padding: 10px 35px 10px 10px; left: 0px; } .tp-title span:nth-child(2) { color: #aaa; padding: 0 5px; background: #F7F7F7; right: 0px; height: 100%; line-height: 40px; top: 0px; position: absolute; display: block; }
・</body>の直前にjsファイルを読み込ませるためのコードを記述。
<!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!--ダウンロードしたファイル--> <script type="text/javascript" src="js/jquery.stapel.js"></script> <!--javascript追記--> <script type="text/javascript"> $(function() { var $grid = $('#tp-grid'), $name = $('#name'), $close = $('#close'), $loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore($grid), stapel = $grid.stapel({ randomAngle: true, delay: 50, gutter: 70, pileAngles: 5, onLoad: function() { $loader.remove(); }, onBeforeOpen: function(pileName) { $name.html(pileName); }, onAfterOpen: function(pileName) { $close.show(); } }); $close.on('click', function() { $close.hide(); $name.empty(); stapel.closePile(); }); }); </script>
・<body></body>内にコードを記述<div class="topbar"> <span id="close" class="back">←</span> </div> <ul id="tp-grid" class="tp-grid"> <!-- Bryan Moats --> <li data-pile="Bryan Moats"> <a href="http://drbl.in/cmVe"> <span class="tp-info"> <span>Flu & You</span> </span> <img src="images/1/1.jpg" /> </a> </li> <li data-pile="Bryan Moats"> <a href="http://drbl.in/cmhM"> <span class="tp-info"> <span>Test Your Flu IQ</span> </span> <img src="images/1/2.jpg" /> </a> </li> <li data-pile="Bryan Moats"> <a href="http://drbl.in/eKdt"> <span class="tp-info"> <span>Unexpected Fatherly Faces and Feelings</span> </span> <img src="images/1/3.jpg" /> </a> </li> <!-- Mike Dornseif --> <li data-pile="Mike Dornseif"> <a href="http://drbl.in/eiUm"> <span class="tp-info"> <span>On to Easter</span> </span> <img src="images/2/1.jpg" /> </a> </li> <li data-pile="Mike Dornseif"> <a href="http://drbl.in/ekMY"> <span class="tp-info"> <span>Love Birds</span> </span> <img src="images/2/2.jpg" /> </a> </li> <li data-pile="Mike Dornseif"> <a href="http://drbl.in/esQV"> <span class="tp-info"> <span>Here Fishy fishy</span> </span> <img src="images/2/3.jpg" /> </a> </li> <!-- Griffin Moore --> <li data-pile="Griffin Moore"> <a href="http://drbl.in/fzUB"> <span class="tp-info"> <span>Briefcase</span> </span> <img src="images/3/1.jpg" /> </a> </li> <li data-pile="Griffin Moore"> <a href="http://drbl.in/fQEv"> <span class="tp-info"> <span>Clipboard</span> </span> <img src="images/3/2.jpg" /> </a> </li> <li data-pile="Griffin Moore"> <a href="http://drbl.in/fREU"> <span class="tp-info"> <span>Sweet pack</span> </span> <img src="images/3/3.jpg" /> </a> </li> <!-- Andrea Austoni --> <li data-pile="Andrea Austoni"> <a href="http://drbl.in/cyWa"> <span class="tp-info"> <span>Growth in 2012 (Holiday Card)</span> </span> <img src="images/4/1.jpg" /> </a> </li> <li data-pile="Andrea Austoni"> <a href="http://drbl.in/cRkb"> <span class="tp-info"> <span>Grady Wilson</span> </span> <img src="images/4/2.jpg" /> </a> </li> <li data-pile="Andrea Austoni"> <a href="http://drbl.in/cSKM"> <span class="tp-info"> <span>More Cowbell</span> </span> <img src="images/4/3.jpg" /> </a> </li> </ul>
サンプルのhtmlコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Adaptive Thumbnail Pile Effect</title> <link rel="stylesheet" type="text/css" href="css/stapel.css" /> <script src="js/modernizr.custom.63321.js"></script> </head> <body> <div class="container"> <div class="topbar"> <span id="close" class="back">←</span> </div> <ul id="tp-grid" class="tp-grid"> <!-- Bryan Moats --> <li data-pile="Bryan Moats"> <a href="http://drbl.in/cmVe"> <span class="tp-info"> <span>Flu & You</span> </span> <img src="images/1/1.jpg" /> </a> </li> <li data-pile="Bryan Moats"> <a href="http://drbl.in/cmhM"> <span class="tp-info"> <span>Test Your Flu IQ</span> </span> <img src="images/1/2.jpg" /> </a> </li> <li data-pile="Bryan Moats"> <a href="http://drbl.in/eKdt"> <span class="tp-info"> <span>Unexpected Fatherly Faces and Feelings</span> </span> <img src="images/1/3.jpg" /> </a> </li> <!-- Mike Dornseif --> <li data-pile="Mike Dornseif"> <a href="http://drbl.in/eiUm"> <span class="tp-info"> <span>On to Easter</span> </span> <img src="images/2/1.jpg" /> </a> </li> <li data-pile="Mike Dornseif"> <a href="http://drbl.in/ekMY"> <span class="tp-info"> <span>Love Birds</span> </span> <img src="images/2/2.jpg" /> </a> </li> <li data-pile="Mike Dornseif"> <a href="http://drbl.in/esQV"> <span class="tp-info"> <span>Here Fishy fishy</span> </span> <img src="images/2/3.jpg" /> </a> </li> <!-- Griffin Moore --> <li data-pile="Griffin Moore"> <a href="http://drbl.in/fzUB"> <span class="tp-info"> <span>Briefcase</span> </span> <img src="images/3/1.jpg" /> </a> </li> <li data-pile="Griffin Moore"> <a href="http://drbl.in/fQEv"> <span class="tp-info"> <span>Clipboard</span> </span> <img src="images/3/2.jpg" /> </a> </li> <li data-pile="Griffin Moore"> <a href="http://drbl.in/fREU"> <span class="tp-info"> <span>Sweet pack</span> </span> <img src="images/3/3.jpg" /> </a> </li> <!-- Andrea Austoni --> <li data-pile="Andrea Austoni"> <a href="http://drbl.in/cyWa"> <span class="tp-info"> <span>Growth in 2012 (Holiday Card)</span> </span> <img src="images/4/1.jpg" /> </a> </li> <li data-pile="Andrea Austoni"> <a href="http://drbl.in/cRkb"> <span class="tp-info"> <span>Grady Wilson</span> </span> <img src="images/4/2.jpg" /> </a> </li> <li data-pile="Andrea Austoni"> <a href="http://drbl.in/cSKM"> <span class="tp-info"> <span>More Cowbell</span> </span> <img src="images/4/3.jpg" /> </a> </li> </ul> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.stapel.js"></script> <script type="text/javascript"> $(function() { var $grid = $('#tp-grid'), $name = $('#name'), $close = $('#close'), $loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore($grid), stapel = $grid.stapel({ randomAngle: true, delay: 50, gutter: 70, pileAngles: 5, onLoad: function() { $loader.remove(); }, onBeforeOpen: function(pileName) { $name.html(pileName); }, onAfterOpen: function(pileName) { $close.show(); } }); $close.on('click', function() { $close.hide(); $name.empty(); stapel.closePile(); }); }); </script> </body> </html>
- ファイル1式をサーバーにアップロードして設置完了。